<template>
  <div id="app">
    <!-- <Permission /> -->
    <!-- <el-test /> -->
    <!--
            <el-avatar1 :size="size" :src="circleUrl" />

            <el-avatar1 shape="square" :size="size" :src="squareUrl" />
    -->
    <!-- <Scss /> -->
    <!-- <baseInput @input.native="test" /> -->
    <router-view />
    <!-- <Child> -->
    <!-- <template #footer="{list}">
        <div>{{ list }}</div>
        <div>这是底部内容</div>
      </template> -->
    <!-- <template #header>
        <div>这是头部内容</div>
      </template> -->
    <!-- 2.6之后已经废弃，但是还可以用 -->
    <!-- <div slot="header" slot-scope="{list}">
        {{ list }}
        这是头部内容
      </div> -->
    <!-- <template v-slot:header="{list}">
        <div>{{ list }}</div>
        <div>这是头部内容</div>
      </template> -->

    <!-- </Child> -->
    <!-- <div ref="dv">{{ num }}</div> -->
    <!-- <Child ref="child" :num="num" /> -->
    <!-- <button @click="addNum">num执行100次</button> -->
  </div>
</template>

<script>
// import Axios from 'axios'
// import Scss from './Scss.vue'
// import baseInput from './baseInput.vue'
// import Child from './Child.vue'
// import Permission from './Permission.vue'
export default {
  name: 'App',
  components: {
    // Permission
    // Child
    // Scss,
    // baseInput
  },
  data() {
    return {
    //   circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    //   squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    //   sizeList: ['large', 'medium', 'small'],
      num: 0
    }
  },
  created() {
    // Axios('/itcast/nc/article/headline/T1348647853363/0-40.html').then(data => {
    //   console.log(data)
    // })
    // this.$message1('我是一个成功者')
  },
  methods: {
    async  addNum() {
    //   for (let i = 0; i < 100; i++) {
    //     this.num = i // 执行100次 -> 更新是一次
    //   }
      //   this.num = 1000
      //   console.log(this.$refs.dv.innerHTML);
      //   同步任务放在一个更新队列里面(任务去重),执行在promise.then时候执行
      //   一个事件循环的同步任务放在一个更新队列里面，然后通过异步去更新渲染页面
      //   同步任务 -> 微任务 -> 宏任务
      //   Vue 在内部对异步队列尝试使用原生的 Promise.then
      //   当浏览器对微任务的api不支持的时候，异步更新才是宏任务
      //   Promise.resolve().then(() => {
      //     console.log(this.$refs.dv.innerHTML) // 0 1000
      //   })
      //   this.$nextTick(() => {
      // this.num = 101 // 异步更新 微任务
      // console.log(this.$refs.dv.innerHTML) // 101
      // this.$nextTick(() => {
      //   console.log(this.$refs.dv.innerHTML) // 101
      // })
      //   })
      //   await this.$nextTick()
      //   console.log(this.$refs.dv.innerHTML)
      //   this.$nextTick(() => {
      //     console.log(this.$refs.dv.innerHTML) // 1000
      //   })

      //   // 宏任务 -> 微任务清空完毕之后执行
      //   setTimeout(() => {
      //     console.log(this.$refs.dv.innerHTML)
      //   }, 0)

      //   console.log(this.$refs.dv.innerHTML) // 0
    //   this.$nextTick(() => {
    //     this.num = 1
    //     console.log(this.$refs.dv.innerHTML)
    //   })
    //   this.$nextTick(() => {
    //     console.log(this.$refs.dv.innerHTML)
    //   })
    //   Promise.resolve().then(() => {
    //     console.log(this.$refs.dv.innerHTML)
    //   })
    //   console.log(this.$refs.child.num) // 父传子 props
    //   this.$nextTick(() => {
    //     console.log(this.$refs.child.num)
    //     // this.$refs.child.getNum()
    //   })
    }
    // test() {
    //   console.log(123456)
    // }
  }
}
</script>
